<template>
  <div class="layout">
    <!-- 顶部 Header -->
    <header class="header">
      <Header />
    </header>
    <!-- 主体部分：左侧导航 + 右侧内容 -->
    <div class="main">
      <!-- 左侧导航栏 -->
      <el-aside class="sidebar">
        <el-menu :default-active="activeMenu"
                 :default-openeds="['1', '2']"
                 router
        >
          <el-menu-item index="/manager/home">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Menu />
              </el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/manager/user">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/manager/log">
              <el-icon>
                <Message />
              </el-icon>
              <span>日志管理</span>
            </el-menu-item>
            <el-menu-item index="/manager/notice">
              <el-icon>
                <Bell />
              </el-icon>
              <span>公告管理</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- ...其他菜单 -->

        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-main class="content">
        <router-view />
      </el-main>
    </div>
  </div>
</template>

<script setup>
import Header from '@/views/manager/header/index.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 设置当前高亮的菜单项
const activeMenu = ref('')

onMounted(() => {
  // 获取当前路径并设置活动菜单项
  activeMenu.value = route.path
})
</script>

<style scoped lang="scss">
/* 总布局 */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: GhostWhite;
}

/* 顶部 Header */
.header {
  background-color: #f4f4f4;
  border-bottom: 1px solid #ddd;
}

/* 主体部分 */
.main {
  display: flex;
  flex: 1;
}

/* 左侧导航栏 */
.sidebar {
  width: 10%;
  /*min-height: calc(100vh - 50px); /* 减去 Header 的高度 */
  background-color: #f4f4f4;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

/* 右侧内容区域 */
.content {
  width: 90%;
  padding: 20px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

/* 自定义链接样式 */
.routerLink {
  color: black;
  text-decoration: none;
}

.routerLink:hover {
  color: #409eff;
}

.el-menu-vertical-demo {
  border: none;
}
</style>
